<template>
  <div>
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      size="mini"
      class="list-filter"
    >
      <el-form-item prop="merchantName">
        <el-input
          v-model="list.filter.merchantName"
          placeholder="商户名称"
          clearable
        />
      </el-form-item>
      <!-- <el-form-item prop="agencyName">
        <el-input
          v-model="list.filter.agencyName"
          placeholder="引入方名称"
          clearable
        />
      </el-form-item> -->
      <el-form-item prop="areaCode">
        <RegionSelect
          v-model="list.filter.areaCode"
          :props="{
            checkStrictly: true
          }"
          size="mini"
        />
      </el-form-item>
      <!-- <el-form-item prop="auditStatus">
        <KiSelect
          v-model="list.filter.auditStatus"
          :options="[
            { val: 0, key: '资料待审核' },
            { val: 1, key: '待审核' },
            { val: 2, key: '审核通过' },
            { val: 3, key: '审核驳回' }
          ]"
          placeholder="审核状态"
          :props="{ value: 'val', label: 'key' }"
        />
      </el-form-item> -->
      <el-form-item prop="status">
        <KiSelect
          :index.sync="list.filter.status"
          :options="['停用', '启用']"
          placeholder="状态"
        />
      </el-form-item>
      <el-form-item prop="companyName">
        <el-input
          v-model="list.filter.companyName"
          placeholder="企业名称"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div>
        <el-button
          :disabled="!!allPower"
          @click="addRole = true"
          type="primary"
          size="mini"
          style="margin-right: 10px"
        >
          新增商户权限
        </el-button>
        该部门默认拥有{{
          rowData.userType == 0 ? '全平台' : '本企业全部'
        }}商户数据权限
        <el-switch
          v-model="allPower"
          @change="setDataPermStatus"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" size="mini">
      <el-table-column align="center" type="index" />
      <el-table-column label="企业名称" prop="companyName" />
      <el-table-column label="商户所属地区" prop="placeName" />
      <el-table-column label="商户名称" prop="name" />
      <el-table-column label="商户客服电话" prop="phone" />
      <el-table-column label="商户联系人" prop="contracts" />
      <el-table-column label="商户联系人手机号" prop="contactPhone" />
      <!-- <el-table-column label="平台手续费">
        <template slot-scope="{ row }" v-if="row.plateformCharge">
          {{ row.plateformCharge }}%
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="所属引入方" prop="belongAgencyName" /> -->
      <!-- <el-table-column label="审核状态" align="center">
        <template slot-scope="{ row }">
          {{ row.auditStatus | auditStatus }}
        </template>
      </el-table-column> -->
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row }">
          <el-tag v-if="row.bussinessStatus == 1" type="success">启用</el-tag>
          <el-tag v-if="row.bussinessStatus == 0" type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button
            circle
            @click="deleteDataPerm(row)"
            :disabled="!!allPower"
            :loading="loadingBtn"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <addMerchant
      v-if="addRole"
      :rowData="rowData"
      @closeDialog="addRoleClose()"
    />
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import listMixins from './mixins/list-mixins'
import addMerchant from './add-merchant.vue'

export default {
  name: 'merchant-data',
  mixins: [pageMixin, listMixins],
  components: { addMerchant },
  setup: props =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/sys/department',
      axiosConfig: {
        getList: {
          url: 'merchantDataPermList'
        }
      },
      list: {
        filter: {
          departmentId: props.rowData.departmentId
        }
      }
    }),
  data () {
    return {
      dataType: 1
    }
  },
  created () {
    // 更新数据权限状态
    this.$POST('sot-admin-api/sys/department/queryForDetail', {
      id: this.rowData.departmentId
    }).then(res => {
      this.allPower = res.data.merchantDataFlag
    })
  }
}
</script>
